<template>
    <div class="card edit-field">
        <div class="card-body">
            <div class="mb-3">
                <label for="edit" class="form-label">编辑区</label>
                <textarea class="form-control" v-model="content" id="edit" rows="5" placeholder="在这里发帖吧~"></textarea>
                <div class="error_message">{{ error_message }}</div>
                <button type="button" @click="submit_a_post" class="btn btn-primary btn-sm">提交</button>
            </div>    
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    name: 'UserProfileEdit',
    setup(props, context) {
        let content = ref('');
        let error_message = ref('');

        const submit_a_post = () => {
            if(content.value === '') {
                error_message.value = '帖子内容不能为空!';
                return;
            }else {
                error_message.value = '';
            }
            context.emit('submit_a_post', content);
            content.value = '';
        };
        return {
            submit_a_post,
            content,
            error_message,
        }
    }
}
</script>

<style scoped>
.edit-field {
    margin-top: 15px;
}

button {
    float: right;
    margin-top: 5px;
}

.error_message {
    font-size: 0.9em;
    color: red;
}
</style>